import React, { Component,createContext } from 'react'
import Com from './components/Com'

// createContext创建上下文
const Context = createContext()
// Provider(提供数据)
// Consumer(使用数据)
class Delivery extends Component {
  state = {
     count: 100
   }
  render() {
    const { count} = this.state
    return (
      <div>
        <h2>
          我是爷爷组件 -- { count}
        </h2>
        {/* 传值要写value */}
        <Context.Provider value = {count}>
          <Father></Father>
        </Context.Provider>
      </div>
    )
  }
}

class Father extends Component{
  render() {
    return (
      <div>
        <h4>我是父组件</h4>
        <Son/>
      </div>
    )
  }
}

class Son extends Component{
  render() {
    return (
      <div>
        {/* Context.Consumer中必须定义函数 */}
        <Context.Consumer>
          {
            (data) => {
              return <h5>我是子组件 { data}</h5>
            }
          }
        </Context.Consumer>
      </div>
        )
      }
    }

export default Delivery
// 父子组件都在同一个文件中 不需要 额外定义 context.js